<template>
  <div>
      <s-table :search-params="searchParams" :COLUMNS="columns" :async-fc="page" ref="table">
          <template #tableHeader>
              <t-button @click="insert">新增信息</t-button>
          </template>
      </s-table>
      <t-dialog v-model:visible="modalOpen" width="80%" @confirm="onModalSubmit">
          <t-form ref="submitFormRef" :rules="FORM_RULES" :data="submitForm">
            <t-row style="width: 100%" :gutter="[10,24]">
              <t-col :span="3">
              <t-form-item :label="t('pages.productlabeling.productname')" name="productname">
                  <t-input v-model="submitForm.productname" :placeholder="t('pages.productlabeling.productnamePlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.pricesegment')" name="pricesegment">
                  <t-input v-model="submitForm.pricesegment" :placeholder="t('pages.productlabeling.pricesegmentPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.flavortype')" name="flavortype">
                  <t-input v-model="submitForm.flavortype" :placeholder="t('pages.productlabeling.flavortypePlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.tarcontent')" name="tarcontent">
                  <t-input v-model="submitForm.tarcontent" :placeholder="t('pages.productlabeling.tarcontentPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.cocontent')" name="cocontent">
                  <t-input v-model="submitForm.cocontent" :placeholder="t('pages.productlabeling.cocontentPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.pricecategory')" name="pricecategory">
                  <t-input v-model="submitForm.pricecategory" :placeholder="t('pages.productlabeling.pricecategoryPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.cigarettelength')" name="cigarettelength">
                  <t-input v-model="submitForm.cigarettelength" :placeholder="t('pages.productlabeling.cigarettelengthPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.cigarettecircumference')" name="cigarettecircumference">
                  <t-input v-model="submitForm.cigarettecircumference" :placeholder="t('pages.productlabeling.cigarettecircumferencePlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.cigarettestructure')" name="cigarettestructure">
                  <t-input v-model="submitForm.cigarettestructure" :placeholder="t('pages.productlabeling.cigarettestructurePlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.packagingform')" name="packagingform">
                  <t-input v-model="submitForm.packagingform" :placeholder="t('pages.productlabeling.packagingformPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.packagingdesign')" name="packagingdesign">
                  <t-input v-model="submitForm.packagingdesign" :placeholder="t('pages.productlabeling.packagingdesignPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.brandattribute')" name="brandattribute">
                  <t-input v-model="submitForm.brandattribute" :placeholder="t('pages.productlabeling.brandattributePlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.origin')" name="origin">
                  <t-input v-model="submitForm.origin" :placeholder="t('pages.productlabeling.originPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.pricepositioning')" name="pricepositioning">
                  <t-input v-model="submitForm.pricepositioning" :placeholder="t('pages.productlabeling.pricepositioningPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.brandimage')" name="brandimage">
                  <t-input v-model="submitForm.brandimage" :placeholder="t('pages.productlabeling.brandimagePlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.personalitytraits')" name="personalitytraits">
                  <t-input v-model="submitForm.personalitytraits" :placeholder="t('pages.productlabeling.personalitytraitsPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.age')" name="age">
                  <t-input v-model="submitForm.age" :placeholder="t('pages.productlabeling.agePlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.gender')" name="gender">
                  <t-input v-model="submitForm.gender" :placeholder="t('pages.productlabeling.genderPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.income')" name="income">
                  <t-input v-model="submitForm.income" :placeholder="t('pages.productlabeling.incomePlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.occupationalbackground')" name="occupationalbackground">
                  <t-input v-model="submitForm.occupationalbackground" :placeholder="t('pages.productlabeling.occupationalbackgroundPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.consumptionmotivation')" name="consumptionmotivation">
                  <t-input v-model="submitForm.consumptionmotivation" :placeholder="t('pages.productlabeling.consumptionmotivationPlaceholder')"/>
              </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="t('pages.productlabeling.psychologicalcharacteristics')" name="psychologicalcharacteristics">
                  <t-input v-model="submitForm.psychologicalcharacteristics" :placeholder="t('pages.productlabeling.psychologicalcharacteristicsPlaceholder')"/>
              </t-form-item>
              </t-col>
              </t-row>
          </t-form>
      </t-dialog>
  </div>
</template>
<script setup lang="ts">
/*****                                          引用部分开始                                          *****/
import { ref } from "vue";
import { t } from "@/locales";
import STable from '@/components/s-table/index.vue';
import { TableInstanceFunctions } from "@/components/s-table/type";
import { searchParams, COLUMNS, FORM_RULES } from "../productlabeling/props";
import { page, updateApi, insertApi, deleteById } from "@/api/productlabeling";
import { FormInstanceFunctions, Link, Space, MessagePlugin, DialogPlugin } from "tdesign-vue-next";
/*****                                          引用部分结束                                          *****/


/*****                                          属性定义部分开始                                          *****/
const submitForm = ref({
    productid: '',
    productname: '',
    pricesegment: '',
    flavortype: '',
    tarcontent: '',
    cocontent: '',
    pricecategory: '',
    cigarettelength: '',
    cigarettecircumference: '',
    cigarettestructure: '',
    packagingform: '',
    packagingdesign: '',
    brandattribute: '',
    origin: '',
    pricepositioning: '',
    brandimage: '',
    personalitytraits: '',
    age: '',
    gender: '',
    income: '',
    occupationalbackground: '',
    consumptionmotivation: '',
    psychologicalcharacteristics: ''
});
const modalOpen = ref(false);
const submitFormRef = ref<FormInstanceFunctions>(null);
const table = ref<TableInstanceFunctions>(null);
/*****                                          属性定义部分结束                                          *****/


const columns = COLUMNS.concat([{
  align: 'left',
  fixed: 'right',
  width: 120,
  colKey: 'op',
  title: t('components.commonTable.operation'),
  cell: (h, slot:{row:any}) => h(Space, {}, [
      h(Link, {
          theme: 'primary',
          onClick: () => {
              submitForm.value = slot.row;
              modalOpen.value = true;
          }
      }, '修改'),
      h(Link, {
          theme: 'danger',
          onClick: () => {
              const confirmDialog = DialogPlugin.confirm({
                  header: `提示`,
                  body: `删除后，标记为${slot.row.id}的所有信息将被清空，且无法恢复`,
                  confirmBtn: {
                      content: '提交',
                      theme: 'primary',
                      loading: false,
                  },
                  theme: 'warning',
                  onConfirm: async () => {
                      confirmDialog.update({ confirmBtn: { content: '提交中', loading: true } });
                      await deleteById(slot.row.id);
                      MessagePlugin.success('删除成功！');
                      table.value.onSearch();
                      confirmDialog.update({ confirmBtn: { content: '提交', loading: false } });
                      confirmDialog.hide();
                  },
              })
          }
      }, '删除'),
  ])
}]);


/*****                                          页面方法开始                                          *****/
const insert = () => {
  modalOpen.value = true;
  submitForm.value = {
    productid: '',
    productname: '',
    pricesegment: '',
    flavortype: '',
    tarcontent: '',
    cocontent: '',
    pricecategory: '',
    cigarettelength: '',
    cigarettecircumference: '',
    cigarettestructure: '',
    packagingform: '',
    packagingdesign: '',
    brandattribute: '',
    origin: '',
    pricepositioning: '',
    brandimage: '',
    personalitytraits: '',
    age: '',
    gender: '',
    income: '',
    occupationalbackground: '',
    consumptionmotivation: '',
    psychologicalcharacteristics: ''
  };
  // 重置表单实例
  if (submitFormRef.value) {
     submitFormRef.value.reset();
}
}

/**
* 提交表单
*/
const onModalSubmit = async () => {
  const valid = await submitFormRef.value.validate();
  if (valid === true) {
      if (submitForm.value.productid) {
          await updateApi(submitForm.value);
      } else {
          await insertApi(submitForm.value);
      }
      MessagePlugin.success('操作成功！');
      modalOpen.value = false;
      table.value.onSearch();
  }
}
/*****                                          页面方法结束                                          *****/
</script>